<template>
    <div>
        <el-form :model="dynamicData" ref="dynamicData" style="text-align:left" :inline="false">
            <div v-for="(domain, index) in dynamicData.domains" :key="index">
                <el-form-item class="formItemHeader" label="活动时间" :prop="'domains.' + index + '.time'" :rules="{
                                required: true, message: '活动时间不能为空', trigger: 'blur'
                                }">
                    <el-date-picker v-model="domain.time" value-format="yyyy-MM-dd" type="daterange"
                                    range-separator="至" start-placeholder="开始日期"
                                    end-placeholder="结束日期"></el-date-picker>
                </el-form-item>
                <el-form-item class="formItemHeader" label="活动地点" :prop="'domains.' + index + '.spot'" :rules="{
                                required: true, message: '活动地点不能为空', trigger: 'blur'
                                }">
                    <el-input v-model="domain.spot" type=textarea :autosize="{ minRows: 5, maxRows: 8}"></el-input>
                </el-form-item>
                <el-form-item class="formItemHeader" label="活动级别" :prop="'domains.' + index + '.level'" :rules="{
                                required: true, message: '活动级别不能为空', trigger: 'blur'
                                }">
                    <el-input v-model="domain.level" type=textarea :autosize="{ minRows: 5, maxRows: 8}"></el-input>
                </el-form-item>
                <el-form-item class="formItemHeader" label="角色" :prop="'domains.' + index + '.role'" :rules="{
                                required: true, message: '角色不能为空', trigger: 'blur'
                                }">
                    <el-input v-model="domain.role" type=textarea :autosize="{ minRows: 5, maxRows: 8}"></el-input>
                </el-form-item>
                <el-form-item class="formItemHeader" label="活动名称" :prop="'domains.' + index + '.activity'" :rules="{
                                required: true, message: '活动名称不能为空', trigger: 'blur'
                                }">
                    <el-input v-model="domain.activity" type=textarea :autosize="{ minRows: 5, maxRows: 8}"></el-input>
                </el-form-item>
                <el-form-item class="formItemHeader" label="个人总结" :prop="'domains.' + index + '.summary'" :rules="{
                                required: true, message: '个人总结不能为空', trigger: 'blur'
                                }">
                    <el-input v-model="domain.summary" type=textarea :autosize="{ minRows: 5, maxRows: 8}"></el-input>
                </el-form-item>
                <el-form-item class="formItemHeader">
                    <el-button class="formBtn" icon="el-icon-delete" type="danger"
                               @click.prevent="removeDomain(domain)"></el-button>
                </el-form-item>
            </div>
            <el-form-item>
                <el-button class="formBtn" icon="el-icon-plus" type="success" @click="addDomain"></el-button>
                <!-- <el-button @click="resetForm('dynamicData')">重置</el-button> -->
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    props: {
        dynamicData: {
            type: Object,
            default: function () {
                return {};
            }
        },
        timestamp: {
            type: String,
            default: function () {
                return '';
            }
        }
    },
    data() {
        return {}
    },
    watch: {
        timestamp() {
            this.submitForm('dynamicData');
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$emit('dynamicFormChange', this.dynamicData.domains)
                } else {
                    console.log('error submit!!');
                    this.$emit('dynamicFormChange', false)
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        removeDomain(item) {
            var index = this.dynamicData.domains.indexOf(item)
            if (index !== -1) {
                this.dynamicData.domains.splice(index, 1)
            }
        },
        addDomain() {
            this.dynamicData.domains.push({
                type: '',
                value: '',
                key: ''
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.formItemHeader {
  //display: inline-block;
  //margin-right: 10px;
  //width: 30%;
  margin-bottom: 20px;
}

.formItemHeader:last-of-type {
  //width: 400px;
}

.formItem {
  display: inline-block;
  margin-right: 10px;
  width: 30%;
  margin-bottom: 20px;
}

.formBtn {
  width: 100%;
}
</style>
